<template>
    <div>
        <h2 class="name">商品添加</h2>
        <div class="container">
            <el-form
                label-position="left"
                label-width="100px"
                :model="form"
                style="max-width: 500px"
                ref="myform"
                :rules="rules"
                >
                <el-form-item 
                    label="商品名称"
                    prop="name"
                    >
                    <el-input v-model="form.name" clearable placeholder="请输入商品名称" />
                </el-form-item>

                <el-form-item 
                    label="商品价格"
                    prop="price"
                    >
                    <el-input v-model="form.price" clearable placeholder="请输入商品整数的价格"/>
                </el-form-item>

                <el-form-item 
                    label="商品库存"
                    prop="count"
                    >
                    <el-input v-model="form.count" clearable placeholder="请输入商品数量"/>
                </el-form-item>

                <el-form-item 
                    label="商品折扣"
                    prop="percent"
                    >
                    <el-input v-model="form.percent" type="Number" min="1" max="10" placeholder="请输入商品折扣，1代表一折"/>
                </el-form-item>

                <el-form-item 
                    label="商品类别"
                    prop="cateid"
                    >
                    <el-select v-if="cateList.length>0" clearable v-model="form.cateid" placeholder="请选择" size="middle">
                        <el-option
                        v-for="(val,key) in cateList"
                        :key="key"
                        :label="val.catename"
                        :value="val.catevalue"
                        />
                    </el-select>
                </el-form-item>
               
                <el-form-item 
                    label="商品类型"
                    prop="typeid"
                    >
                    <el-select v-if="cateList.length>0" clearable v-model="form.typeid" placeholder="请选择" size="middle">
                        <el-option
                        v-for="(val,key) in typeList"
                        :key="key"
                        :label="val.typename"
                        :value="val.typevalue"
                        />
                    </el-select>
                </el-form-item>

                <el-form-item 
                    label="商品图片"
                    >
                    <input type="file" multiple ref="files">
                </el-form-item>
                <div class="button">
                    <el-button type="primary" class="confirm" @click="submitForm">
                        确定
                    </el-button>
                    <el-button type="warning" class="confirm" @click="reset">
                        重置
                    </el-button>
                </div>
            </el-form>
            
        </div>
    </div>
</template>
<script>
import { reactive ,ref,onMounted,toRefs} from 'vue'
import {Plus,Download,Delete} from '@element-plus/icons-vue' ; 
import {ajax} from '@/api';
import { ElMessage } from 'element-plus';
import {useStore} from 'vuex' ;
import {useRouter} from 'vue-router' ;
export default {
    components:{
        Plus,
        Download,
        Delete
    },
    setup(props){
        const store = useStore();
        const router = useRouter();
        const state = reactive({
            form:{},
            rules:{
                name:[
                    {
                        required:true,message:'请填写商品名称'
                    }
                ],
                price:[
                    {
                        required:true,message:'请填写商品价格'
                    },
                    {
                        pattern:/\d+/g,message:'请输入符合合理的数据'
                    }
                ],
                count:[
                    {
                        required:true,message:'请填写数量'
                    },
                    {
                        pattern:/\d+/g,message:'请填写输入合理的数据'
                    }
                ],
                percent:[
                    {required:true,message:'请填写折扣'}
                ],
                cateid:[
                    {required:true,message:'请填写商品类别'}
                ],
                typeid:[
                    {required:true,message:'请填写类型'}
                ]
            }
        });
        const myform = ref();
        const files = ref();
        
        const reset = ()=>{
            myform.value.resetFields();
        }

        const submitForm = ()=>{
            myform.value.validate(async (valid)=>{
                if(valid){
                    let imgs = [] ; 
                    let time = new Date();
                    for(let i = 0 ; i < Array.from(files.value.files).length ; i ++ ){
                        let form = new FormData();
                        form.append('file',Array.from(files.value.files)[i]);
                        let {path} = await ajax.uploadfiles(form);
                        imgs.push(path);
                    }
                    if(imgs.length == Array.from(files.value.files).length){
                        let {code,data} = await ajax.addGood({...state.form,imgs:imgs,time:time,producid:store.state.userInfo._id,is_delete:false,is_sec:false});
                        if( code == 200 ){
                            reset();
                            // files.value.files.length = 0 ; 
                            ElMessage.success('商品添加成功！');
                            router.push({path:'/main/goodsList'});
                        }
                    }
                } else {
                    ElMessage.error('请输入有效信息');
                }
            })
        }

        onMounted(()=>{
            
        });

        return {
            ...toRefs(state),
            myform,
            submitForm,
            reset,
            files
        }
    }
}
</script>
<style lang="scss" scoped>
.name{
    height: 60px;
    line-height: 60px;
    padding-left: 40px;
    color: #fff;
    font-weight: 600;
    font-size: 18px;
    background-color: burlywood;
}
.container{
    margin-top: 15px;
    margin-left: 15px;
    .button{
        display: flex;
        justify-content: space-around;
        .confirm{
            width: 30%;
        }
    }
}
</style>